<template>
  <div class="two_house">
    <div>
      <!--<div class="nav_bar">-->
      <house-title :searchId="searchId" :title="title"></house-title>

      <div  :class="{list_content_fixed:listContentFixed === true}">
        <qu-select  :getBuildList="getQuList" :formData="formData" :buildSel="quSelect"></qu-select>
      </div>

      <div class="two_house_content">
        <qu-content></qu-content>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Navbar, TabItem} from 'mint-ui';
  import QuSelect from '../../components/lookQu/QuSelect';
  import QuContent from '../../components/listComponents/QuContent'
  import HouseTitle from '../../components/house/HouseTitle'
  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  export default {
    name: 'LookQu',
    data() {
      return {
        title:'找小区',
        searchId:3,
        listContentFixed:false,
        quSelect:{
          "area":[
            {
              "CODE":"460101",
              "region_name_c":"市辖区"
            },
            {
              "CODE":"460105",
              "region_name_c":"秀英区"
            },
            {
              "CODE":"460106",
              "region_name_c":"龙华区"
            },
            {
              "CODE":"460107",
              "region_name_c":"琼山区"
            },
            {
              "CODE":"460108",
              "region_name_c":"美兰区"
            }
          ],
          "price":[
            {
              "value":"0-10000",
              "title":"1万以下"
            },
            {
              "value":"10000-20000",
              "title":"1万-2万"
            },
            {
              "value":"20000-30000",
              "title":"2万-3万"
            },
            {
              "value":"30000-50000",
              "title":"3万-5万"
            },
            {
              "value":"50000-80000",
              "title":"5万-8万"
            },
            {
              "value":"80000",
              "title":"8万以上"
            }
          ],
          "ht_room_num":[
            {
              "value":"5",
              "title":"五室"
            },
            {
              "value":"4",
              "title":"四室"
            },
            {
              "value":"3",
              "title":"三室"
            },
            {
              "value":"2",
              "title":"二室"
            },
            {
              "value":"1",
              "title":"一室"
            }
          ],
          "renovation":[
            {
              "id":6,
              "title":"豪装"
            },
            {
              "id":5,
              "title":"精装"
            },
            {
              "id":2,
              "title":"简装"
            },
            {
              "id":1,
              "title":"毛坯"
            }
          ],
          "agent":[
            {
              "id":1,
              "title":"全案代理"
            },
            {
              "id":2,
              "title":"联合代理"
            },
            {
              "id":3,
              "title":"渠道总代"
            },
            {
              "id":4,
              "title":"渠道一级"
            },
            {
              "id":5,
              "title":"普通分销"
            },
            {
              "id":6,
              "title":"无合作"
            }
          ]
        },
        formData:{
          ht_room_num:'',
          type_is_apartment:'',
          type_is_ocean:'',
          type_is_villa:'',
          type_is_shops:'',
          type_is_office:'',
          type_is_hotel:'',
          type_is_housing:'',
          renovation_id:''
        },
      }
    },
    methods: {
      getQuList(){

      },
      handleScroll () {
        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let scrollTop = window.pageYOffset;
        // console.log(scrollTop);
        // let offsetTop = document.getElementsByTagName('.two_house_content').offsetTop;
        if(scrollTop > 50) {
          this.listContentFixed = true
        } else {
          this.listContentFixed = false
        }
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    components: {
      QuContent,
      HouseTitle,
      QuSelect
    }
  }
</script>

<style scoped>
  .two_house .nav_bar {
    display: flex;
    background-color: #e6191e;
    height: 30px;
    padding: 10px;
    line-height: 30px;
    justify-content: space-between;
    color: #ffffff;
  }

  .two_house .nav_bar > div .icon-icon4 {
    margin-right: 10px;
  }

  .nav_bar div:nth-child(2) {
    /*width: 70%;*/
  }

  .two_house .nav_bar .mint-navbar .mint-tab-item {
    padding: 7px 0;
    margin: 0 10px;
  }

  .two_house .nav_bar .mint-navbar {
    background-color: #e6191e;
  }
  .two_house .nav_bar>div:nth-child(2){
    min-width: 60%;
    /*width: 50%;*/
  }
  .two_house .nav_bar .mint-navbar .mint-tab-item.is-selected {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
  }

  .two_house .nav_bar > div .icon-sousuo {
    margin-right: 10px;
  }
  .two_house .two_house_content{
    height: 50px;
  }
  .two_house .list_content_fixed{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    background-color: #e6191e;
    width: 100%;
  }
</style>
